<template>
  <div class="app-container calendar-list-container">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-input
        clearable
        @keyup.enter.native="handleFilter"
        v-model="listQuery.nickName"
        style="width: 200px; margin-right: 15px; margin-top: 7px"
        class="filter-item"
        placeholder="请输入昵称"
      />
      <el-input
        clearable
        @keyup.enter.native="handleFilter"
        v-model="listQuery.userPhone"
        style="width: 200px; margin-right: 15px; margin-top: 7px"
        class="filter-item"
        placeholder="请输入手机号"
      />

      <el-select
        v-model="listQuery.cardType"
        placeholder="请选择月卡类型"
        clearable
        class="filter-item"
        style="width: 200px; margin-right: 15px; margin-top: 7px"
      >
        <el-option label="设备卡" value="1"></el-option>
        <el-option label="城市卡" value="2"></el-option>
      </el-select>

      <el-input
        clearable
        @keyup.enter.native="handleFilter"
        v-model="listQuery.equipmentNumber"
        style="width: 200px; margin-right: 15px; margin-top: 7px"
        class="filter-item"
        placeholder="请输入设备编号"
      />

      <el-input
        clearable
        @keyup.enter.native="handleFilter"
        v-model="listQuery.address"
        style="width: 200px; margin-right: 15px; margin-top: 7px"
        class="filter-item"
        placeholder="请输入省市"
      />
      <el-input
        clearable
        @keyup.enter.native="handleFilter"
        v-model="listQuery.outTradeNo"
        style="width: 200px; margin-right: 15px; margin-top: 7px"
        class="filter-item"
        placeholder="请输入支付流水号"
      />
      <!-- <el-select
        v-model="listQuery.payType"
        placeholder="请选择支付类型"
        clearable
        class="filter-item"
        style="width: 200px;margin-right:15px;margin-top:7px"
      >
        <el-option label="微信" value="1"></el-option>
        <el-option label="余额" value="3"></el-option>
      </el-select> -->

      <!-- 2022.09.07  合并为时间日期选择器 -->
      <el-date-picker
        v-model="dateTime"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:00"
        @change="getDateTime"
      >
      </el-date-picker>
      <!-- <el-date-picker v-model="listQuery.startTime"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 200px;margin-right:15px;margin-top:7px"

                          placeholder="选择开始日期"></el-date-picker>
          <el-date-picker v-model="listQuery.endTime"
                          type="datetime"
          style="width: 200px;margin-right:15px;margin-top:7px"

                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择结束日期"></el-date-picker> -->

      
      <el-button
        type="primary"
        v-waves
        icon="el-icon-search"
        @click="handleFilter"
        style="margin-left:15px"
        >查找</el-button
      >
      <el-button
        type="primary"
        @click="handleDownload"
        icon="el-icon-download"
        :loading="downloadLoading"
        >导出</el-button
      >
    </div>
    <!-- table 表格 -->
    <el-table
      :data="list"
      v-loading="loading.list"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="序号" prop="index" align="center" width="80px" />
      <el-table-column label="昵称" prop="nickName" align="center" />
      <el-table-column label="手机号" prop="userPhone" align="center" />
      <el-table-column label="月卡类型" prop="cardTypeInfo" align="center" />
      <el-table-column
        label="设备编号"
        prop="equipmentNumberInfo"
        align="center"
      />
      <el-table-column label="省市" prop="address" align="center" />
      <el-table-column label="支付流水号" prop="outTradeNo" align="center" />
      <el-table-column label="金额(元)" prop="amountInfo" align="center" />
      <el-table-column
        label="使用时长(小时)"
        prop="useTimeQuantumInfo"
        align="center"
      />
      <el-table-column label="过期时长(天)" prop="timeDay" align="center" />
      <el-table-column label="支付类型" prop="payTypeInfo" align="center" />
      <el-table-column label="下单时间" prop="ctime" align="center" />>
    </el-table>
    <!-- 手动退款 -->
    <el-dialog title="手动退款" :visible.sync="dialog1.add">
      <el-form
        :model="refundQuery"
        :rules="bindRules"
        ref="bindForm"
        label-position="right"
        label-width="120px"
      >
        <el-form-item label="剩余金额">
          <div style="color: green">{{ this.refundQuery.amount }}</div>
        </el-form-item>

        <el-form-item label="退款金额" prop="orderRefundAmount">
          <el-input
            type="number"
            clearable
            v-model="refundQuery.orderRefundAmount"
            placeholder="请输入退款金额"
          ></el-input>
        </el-form-item>
        <el-form-item label="退款原因" prop="orderRefundReason">
          <el-input
            clearable
            v-model="refundQuery.orderRefundReason"
            placeholder="请输入退款原因"
            type="textarea"
            :rows="3"
          ></el-input>
        </el-form-item>
        <div style="color: red">
          (注意：退款金额不能超过订单金额，且只能进行一次手动退款。分成完毕的订单进行退款，代理商不扣除收益)
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog1.add = false">取消</el-button>
        <el-button type="primary" :loading="loading.add" @click="refundOrder"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.offset"
        :page-sizes="[10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getListCard, refundOrder } from "@/api/equipmentOrders";
import { parseTime, getdTime } from "@/utils";
export default {
  name: "equipmentOrders_listCard",
  data() {
    var validateAmount = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("金额不能为空!"));
      }
      setTimeout(() => {
        var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
        if (!isNum.test(value)) {
          callback(new Error("请输入正确金额,金额不能小于0，两位小数以内!"));
        } else {
          if (value > this.refundQuery.amount) {
            callback(new Error("金额大于剩余金额!"));
          }
          if ((value + "").length > 12) {
            callback(new Error("金额超过范围-12位"));
          }
          callback();
        }
      }, 300);
    };

    return {
      dateTime: "",
      total: 0,
      listQuery: {
        offset: 1,
        limit: 10,
        outTradeNo: "",
        nickName: "",
        userPhone: "",
        cardType: "",
        payType: "",
        equipmentNumber: "",
        address: "",
        orderStatus: "",
        startTime: "",
        endTime: "",
      },
      refundQuery: {
        orderRefundAmount: "",
        orderRefundReason: "",
        orderId: "",
      },
      bindRules: {
        orderRefundAmount: [
          { required: true, validator: validateAmount, trigger: "change" },
        ],
        orderRefundReason: [
          { required: true, message: "请输入退款原因", trigger: "change" },
        ],
      },
      bindRules2: {},
      dialog1: {
        add: false,
      },
      dialog2: {
        add: false,
      },
      list: null,
      loading: {
        list: false,
        download: false,
      },
      categoryList: [],
      downloadLoading: false,
    };
  },
  methods: {
    getDateTime(value) {
      if (value) {
        this.listQuery.startTime = value[0];
        this.listQuery.endTime = value[1];
      } else {
        this.listQuery.startTime = "";
        this.listQuery.endTime = "";
      }
    },
    //导出
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then((excel) => {
        const tHeader = [
          "昵称",
          "手机号",
          "月卡类型",
          "设备编号",
          "省市",
          "支付流水号",
          "金额(元)",
          "使用时长(小时)",
          "过期时长(天)",
          "支付类型",
          "下单时间",
        ];
        const filterVal = [
          "nickName",
          "userPhone",
          "cardTypeInfo",
          "equipmentNumberInfo",
          "address",
          "outTradeNo",
          "amountInfo",
          "useTimeQuantumInfo",
          "timeDay",
          "payTypeInfo",
          "ctime",
        ];
        const data = this.formatJson(filterVal, this.list);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "月卡订单列表",
        });
        this.downloadLoading = false;
      });
    },

    // 数据筛选
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },

    resetForm(flag) {
      this.$refs.bindForm && this.$refs.bindForm.resetFields();
      if (flag) {
        this.refundQuery = {
          id: "",
        };
      }
    },
    refundOrderView(row) {
      this.resetForm();
      this.dialog1.add = true;
      this.refundQuery.orderId = row.orderId;
      this.refundQuery.amount =
        row.orderAmountInfo - row.orderRefundAmount / 100;
    },
    //手动退款
    async refundOrder() {
      this.$refs["bindForm"].validate(async (valid) => {
        if (valid) {
          try {
            this.loading.add = true;
            let query = {
              orderId: this.refundQuery.orderId,
              orderRefundAmount: this.refundQuery.orderRefundAmount * 100,
              orderRefundReason: this.addQuery.orderRefundReason,
            };
            this.loading.add = true;
            //调用服务器接口
            const { data } = await refundOrder(query);
            this.$message({
              type: "success",
              message: "退款成功",
            });
            this.dialog.add = false;
            this.loading.add = false;
            this.resetForm();
            this.getListCard();
          } catch (error) {
            this.loading.add = false;
            this.resetForm();
          }
        }
      });
    },
    //获取设备订单列表
    async getListCard() {
      this.loading.list = true;
      try {
        //调用服务器接口
        const { data } = await getListCard({ ...this.listQuery });
        this.list = data.records.map((item, index) => {
          return {
            index: index + 1,
            cardTypeInfo: item.cardType == 1 ? "城市卡" : "设备卡",
            equipmentNumberInfo:
              item.cardType == 1 ? "-" : item.equipmentNumber,
            address: item.cardType == 1 ? item.province + item.city : "-",
            amountInfo: item.amount / 100,
            useTimeQuantumInfo: item.useTimeQuantum / 3600000,
            payTypeInfo:
              item.payType == 1
                ? "微信"
                : item.payType == 2
                ? "支付宝"
                : item.payType == 3
                ? "余额"
                : item.payType == 4
                ? "月卡"
                : "-",
            ...item,
          };
        });
        this.total = data.total;
      } catch (error) {}
      this.loading.list = false;
    },
    handleFilter() {
      this.listQuery.offset = 1;
      this.getListCard();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getListCard();
    },
    handleCurrentChange(val) {
      this.listQuery.offset = val;
      this.getListCard();
    },
    formatDate(date, offset) {
      if (date && typeof date == "object") {
        const d = date[offset];
        return new Date(d).getTime();
      }
      return "";
    },
  },
  created() {
    this.getListCard();
  },
};
</script>
